<template>
	<view>
		<view class="an-uploadImg-group">
			<view>
				<view class="an-img" v-for="(item, index) in imgList" :key="index" @click="perviewImg(index)">
					<image :src="item" v-if="item"></image>
					<view class="an-icon-close" @click.stop="handleRemove(index)"><uni-icons type="closeempty" size="26" color="#F00"></uni-icons></view>
				</view>
				<view class="an-img-add" v-if="imgList.length <= 5" @click="chooseImage">
					<view class="addSize">+</view>
					<view class="addImg">{{ textDescribe }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';

export default {
	name: 'AnUploadImg',
	components: {
		uniIcons
	},
	// props: ['textDescribe', 'imgs'],
	props: {
		textDescribe: {
			required: false,
			type: String
		},
		imgs: {
			required: false,
			type: Array
		},
		time: {
			required: false,
			default: 0
		}
	},
	data() {
		return {
			imgList: [],
			imgBase64List: []
		};
	},
	mounted: function() {
		this.$nextTick(function() {
			if (this.imgs) {
				this.imgList = this.imgs;
			}
		});
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					if (this.imgList.length <= 5) {
						this.imgList.push(chooseImageRes.tempFiles[0].path);
						this.$emit('getImgArr', this.imgList);
					}
				}
			});
		},
		perviewImg(index) {
			let urls = [];
			if (index != -1) {
				urls[0] = this.imgList[index];
			} else {
				urls = this.imgList;
			}
			uni.previewImage({
				urls: urls
			});
		},
		handleRemove(index) {
			let il = [],
				ibl = [];
			for (var i = 0; i < this.imgList.length; i++) {
				if (i != index) {
					il.push(this.imgList[i]);
					ibl.push(this.imgBase64List[i]);
				}
			}
			this.imgList = il;
			this.imgBase64List = ibl;
			this.$emit('getImgArr', this.imgList);
			this.$emit('delArr', index);
		}
	}
};
</script>

<style>
.an-uploadImg-group {
	margin: 5upx 20upx;
}

.an-img {
	float: left;
	width: 302rpx;
	height: 224rpx;
	margin-bottom: 10rpx;
	margin-right: 10upx;
	position: relative;
}

.an-img-add {
	float: left;
	margin-right: 10upx;
	width: 302rpx;
	height: 224rpx;
	background-color: #f3f3f3;
	text-align: center;
	/* line-height: 110upx; */
}

.an-img > image {
	width: 302rpx;
	height: 224rpx;
}

.an-icon-close {
	position: absolute;
	right: 0upx;
	top: 0upx;
}

.addSize {
	margin-top: 78rpx;
	width: 302rpx;
	font-size: 58rpx;
	color: #afafaf;
	text-align: center;
}

.addImg {
	margin-top: 12rpx;
	width: 302rpx;
	font-size: 26rpx;
	color: #a5a5a5;
	text-align: center;
}
</style>
